<template>
	<view>
		<view style="background: #3464D6;display: inline-block;width: 100%;" v-if="role==2 || role ==3">

			<view class="u-padding-20 " style="color: #fff;">
				<view @click="show = true" class="u-flex u-row-between u-padding-15 u-margin-bottom-20 "
					style="border: 3rpx solid #fff; width: 700rpx;margin: auto;border-radius:10rpx;margin-top: 10rpx;">
					<view>
						{{date}}
					</view>
					<view>
						<u-icon name="calendar-fill" color="#fff" size="40"></u-icon>
					</view>
				</view>
				<!--   <view class="u-margin-bottom-10">
					 <u-section title="订单总数" color="#fff" subColor="#fff" @click="allbook">
					 	<view slot="right" style="font-size: 30rpx;">
					 		<u-icon name="arrow-right"></u-icon>
					 	</view>
					 </u-section>
				 </view>
				<view class="u-margin-bottom-10">
					<u-section title="收益额" color="#fff" subColor="#fff" :arrow="false">
						<view slot="right" style="font-size: 30rpx;">￥{{earningsMoney}}</view>
					</u-section>
				</view>
				
               <view class="u-margin-bottom-10">
					<u-section title="充值金额" color="#fff" subColor="#fff" :arrow="false">
						<view slot="right" style="font-size: 30rpx;">￥{{rechargeMoney}}</view>
					</u-section>
				</view> -->

			</view>



		</view>

		<view class="u-flex u-row-between u-margin-top-20 u-margin-bottom-20" style="width: 700rpx;margin: auto;">
			<view class="u-flex" @click="allbook"
				style="color: #fff; padding: 30rpx;background:#3664D3;width: 320rpx;border-radius: 10rpx;">
				<view>
					<u-icon name="order" color="#fff" size="60"></u-icon>
				</view>
				<view class="u-margin-left-20">
					<view>订单总数</view>
					<view style="font-weight: bold;margin-top: 10rpx;">
						{{orderNum}}
					</view>
				</view>
			</view>
			<view class="u-flex"
				style="color: #fff; padding: 30rpx;background:#3664D3;width: 350rpx;border-radius: 10rpx;">
				<view>
					<u-icon name="rmb-circle" color="#fff" size="60"></u-icon>
				</view>
				<view class="u-margin-left-20">
					<view>充值金额</view>
					<view style="font-weight: bold;margin-top: 10rpx;">
						￥{{rechargeMoney}}
					</view>
				</view>
			</view>
		</view>

		<view class="" style="border-radius: 10rpx; background: #E7F1FA;padding:30rpx;width: 700rpx;margin: auto;">

			<view class="u-flex u-row-between">
				<view class="u-flex">
					<view>
						<u-icon name="rmb-circle" size="60"></u-icon>
					</view>
					<view class="u-margin-left-20">
						收益额
					</view>
				</view>
				<view style="font-size: 30rpx;color: #333;font-weight: bold;">￥{{earningsMoney}}</view>
			</view>


		</view>
		
		
		<view class="u-flex ">
			<view @click="sent(1)" class="u-flex u-row-center" style="margin:20rpx auto; border-radius: 100rpx; width: 300rpx;border: 2rpx solid #4163CE;padding: 15rpx;text-align: center;">
				<u-icon name="coupon-fill" size="35" color="#0064C6"></u-icon>
				<div style='margin-left: 20rpx;color: #0064C6;'>手动发券</div>
			</view>
			<view @click="sent(2)" class="u-flex u-row-center" style="margin:20rpx auto; border-radius: 100rpx; width: 300rpx;border: 2rpx solid #4163CE;padding: 15rpx;text-align: center;">
				<u-icon name="level" size="35" color="#0064C6"></u-icon>
				<div style='margin-left: 20rpx;color: #0064C6;'>手动发卡</div>
			</view>
		</view>
		
		





		<u-tabs :list="nav" :is-scroll="false" :current="current" @change="change" v-if="type==1"></u-tabs>
		<u-gap height="10" bg-color="#f1f1f1"></u-gap>
		<view v-if="!current">
			<view v-for="(item,index) in list" :key="index" class="bg">
				<view class="u-flex u-row-between">
					<view class="u-flex  ">
						<view style="font-weight: bold;font-size: 28rpx;">{{item.carportName}}</view>
						<view style="color: #FA3534;font-weight: bold;margin-left: 20rpx;">
							{{item.status==0?'空闲':item.status==1?'占用':item.status==2?'维修':''}}
						</view>
					</view>
					<view class="">
						<view>
							<u-button size="mini" type="primary" :custom-style="{marginRight:'20rpx',width:'120rpx'}"
								@click="controls(3,item)">开门</u-button>
							<u-button size="mini" type="info" :custom-style="{background:'#343436',color:'#fff',width:'120rpx'}"
								@click="controls(4,item)">关门</u-button>
						
						</view>
					</view>
				</view>
				
				<view class="u-flex u-row-between u-margin-top-20">
					<view>
						<u-button :custom-style="{width:'120rpx'}" size="mini" :type="item.status==2?'error':item.status==0?'suesses':item.status==3?'info':''" @click="carchange(item)">
						   {{item.status==2?'维护中':item.status==0?'营业中':item.status==3?'装修中':''}}
						</u-button>
					</view>
					<view>
						<u-button size="mini" type="success" :custom-style="{marginRight:'20rpx',width:'120rpx'}"
							@click="controls(1,item)">开水电</u-button>
						<u-button :custom-style="{width:'120rpx'}" size="mini" type="warning" @click="controls(2,item)">关水电</u-button>
					</view>
					
				</view>
			</view>
		</view>


		<view v-if="current">
			<!-- <u-gap height="10" bg-color="#f1f1f1"></u-gap>
			<view class="u-flex u-row-around  u-padding-20">
				<view class="numbg">
					<view style="color: #0064C6;margin-bottom: 20rpx;font-size: 40rpx">
						{{orderNum}}单
					</view>
					<view>
						订单总数
					</view>
				</view>
				<view class="numbg">
					<view style="color: #FFA200;margin-bottom: 20rpx;font-size: 40rpx;">
						{{ingNum}}单
					</view>
					<view>
						进行订单
					</view>
				</view>
			</view> -->

			<view>
				<view class="u-padding-30 u-border-bottom">
					<u-section :title="current==1?'进行中订单':'购买的卡券'" :right="false" color="#0064C6" line-color="#0064C6"></u-section>
				</view>

				<List :list="list" @end="end" @go="go"></List>

			</view>

		</view>

		<u-loadmore :status="initial.status" />
		<u-toast ref="uToast" />
		<u-calendar v-model="show" mode="range" @change="changeDate"></u-calendar>
		
		
	   <u-action-sheet @click="selectStoreStatus" :list="storeStatus" v-model="storeStatusShow"></u-action-sheet>
	</view>



</template>

<script>
	import loader from '@/common/loadPage.js';

	import List from './components/carList.vue';
	export default {
		components: {
			List
		},
		mixins: [loader],
		data() {
			return {
				storeStatusShow:false,
				storeStatus:[{
					text: '营业中'
				}, {
					text: '维护中' 
				},{
					text: '装修中'
				}],
				nav: [{
					name: '车位'
				}, {
					name: '订单'
				}, {
					name: '卡券订单'
				}],
				current: 0,
				list: [],
				initial: {
					page: 1,
					geturl: "",
					parm: {
						store_id: '',
						status: 1,
                         order_type:''
					},
					isPage: true
				},
				type: '',
				rechargeMoney: '',
				expenseMoney: '',
				earningsMoney: "",
				orderNum: '',
				date: '',
				show: false,
				role: ''
			}
		},
		methods: {
			selectStoreStatus(e){
				this.$u.post('/api/alliance/carportChange', {
					id: this.storeStatus[0].id,
				    status:e==0?0:e==1?2:e==2?3:''
				}).then(res => {
					this.initial.page = 1;
					this.list = []
					this.getGoods()
				}).catch(err => {
				
				})
			},
			carchange(item) {
				
				this.storeStatusShow=true,
				this.storeStatus[0].id=item.id
				
			},
			go(e) {
				uni.navigateTo({
					url: './detail?txt=' + JSON.stringify(e)
				})
			},

			infomation() {
				return new Promise((resolve, reject) => {
					this.$u.api.userInfo().then(res => {
						this.role = res.role;
						resolve(res)
					}).catch(err => {

					})
				})
			},



			allbook() {
				uni.navigateTo({
					url: './allBook?id=' + this.initial.parm.store_id
				})
			},

			end(item) {
				this.$u.post('/api/alliance/finish', {
					order_id: item.id
				}).then(res => {
					this.$refs.uToast.show({
						title: '订单结束成功',
						type: 'success',
						callback: () => {
							this.initial.page = 1;
							this.getGoods()
						}
					})
				}).catch(err => {

				})
			},
			change(index) {
				this.current = index;
				this.initial.page = 1;
				console.log(index)
				if (!index) {
					this.initial.geturl = '/api/index/carport'
				} else if(index==1) {
					this.initial.parm.order_type=1
					this.initial.parm.status=1
					this.initial.geturl = '/api/alliance/orderList'
				}else if(index==2) {
					 this.initial.parm.order_type=4
					 this.initial.parm.status=''
					this.initial.geturl = '/api/alliance/orderList'
				}
				this.getGoods()
			},
			controls(e, item) {
				uni.showModal({
					title: "温馨提示",
					content: e == 3 ? '是否开门' : e == 4 ? '是否关门' : e == 1 ? '是否打开水电' : e == 2 ? '是否关闭水电' : '',
					success: (res) => {
						if (res.confirm) {
							this.$u.post('/api/alliance/client', {
								carport_id: item.id,
								cmd: e
							}).then(res => {
								this.$refs.uToast.show({
									title: e == 3 ? '开门成功' : e == 4 ? '关门成功' : e == 1 ?
										'水电打开' : e == 2 ? '水电关闭' : '',
									type: 'success',
								})
							}).catch(err => {

							})
						}
					}
				})
			},
			orderStatistics(date) {
				if (this.role == 0 || this.role == 1) return;
				this.$u.post('/api/alliance/orderStatistics', {
					store_id: this.initial.parm.store_id,
					date: date ? date : ''
				}).then(res => {
					var {
						orderNum,
						rechargeMoney,
						expenseMoney,
						earningsMoney
					} = res;
					this.rechargeMoney = JSON.stringify(rechargeMoney);
					this.expenseMoney = JSON.stringify(expenseMoney);
					this.orderNum = orderNum
					this.earningsMoney = earningsMoney
				}).catch(err => {

				})

			},
			changeDate(e) {
				var {
					endDate,
					startDate
				} = e;
				const date = startDate + ' ' + '-' + ' ' + endDate
				this.date = date;
				this.orderStatistics(date)
			},
			sent(e){
				
				uni.navigateTo({
					url:'./sent?id='+this.initial.parm.store_id+'&type='+e
				})
			}


		},
		onLoad(options) {
			let timestamp = Math.round(new Date() / 1000);
			let date = this.$u.timeFormat(timestamp, 'yyyy-mm-dd') + ' ' + '-' + ' ' + this.$u.timeFormat(timestamp,
				'yyyy-mm-dd');
			this.date = date;
			if (options.id) {
				this.initial.parm.store_id = options.id;
				this.type = options.iscar;
				if (options.iscar == 2) {
					this.current = 1;
					this.initial.geturl = '/api/alliance/orderList'
				} else {
					this.initial.geturl = '/api/index/carport'
				}
			}

			this.getGoods()
		},
		async onShow() {
			await this.infomation()
			this.orderStatistics(this.date)

		},




	}
</script>

<style lang="scss">
	.bg {
		background: #E5EFF9;
		width: 700rpx;
		padding: 30rpx;
		border-radius: 10rpx;
		margin: 20rpx auto;
	}

	.numbg {
		width: 334rpx;
		height: 176rpx;
		background: #E5EFF9;
		text-align: center;
		padding: 40rpx 0;
	}
</style>
